<template>
	<div class="header-nav">
		<div class="nav-box">
			<div class="img" @click="goToIndex()">
				<img src="../../../../static/images/logo.png" />
			</div>
			<ul>
				<li :class="$route.path == '/' ? 'newColor' : ''" @click="goToList(1)">首页</li>
				<li :class="$route.path == '/product' ? 'newColor' : ''" @click="goToList(2)">产品与服务</li>
				<li :class="$route.path == '/news' || $route.path == '/newsDetails'? 'newColor' : ''" @click="goToList(3)">新闻动态</li>
				<li :class="$route.path == '/about' ? 'newColor' : ''" @click="goToList(4)">关于我们</li>
				<li :class="$route.path == '/joinUs' ? 'newColor' : ''" @click="goToList(5)">加入我们</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		components:{
		},
		methods:{
			goToList:function(index){
				if(index == 1){
					this.$router.push({
						path: '/'
					});
				}
				if(index == 2){
					this.$router.push({
						path: '/product'
					});
				}
				if(index == 3) {
					this.$router.push({
						path: '/news'
					});
				}
				if(index == 4){
					this.$router.push({
						path: '/about'
					});
				}
				if(index == 5) {
					this.$router.push({
						path: '/joinUs'
					});
				}

			},
			goToIndex() {
				this.$router.push({
					path: '/'
				});
			}
			
		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted(){

		}
	}
</script>

<style lang="scss">
	@import '../../../styles/styles.scss';
	.header-nav {
		width: 100%;
		height: 80px;
		margin: 0 auto;
		text-align: center;
		.nav-box {
			display: inline-block;
			/*width: 1020px;*/
			height: 80px;
			line-height: 80px;
			width:1208px;
			.img {
				display: inline-block;
				/*width: 390px;*/
				text-align: left;
				height: 80px;
				line-height: 80px;
				margin-right:300px;
				&:hover {
					cursor: pointer;
				}
				img {
					display: inline-block;
					vertical-align: middle;
					width: 85px;
					height: 60px;
				}
			}
			ul {
				display: inline-block;
			}
			ul li {
				position: relative;
				display: inline-block;
				font-family: 'MicrosoftYaHei';
				font-size: 18px;
				color: #000000;
				margin-right: 70px;
				transition: all .3s;
				-moz-transition: all .3s;   /* Firefox 4 */
				-webkit-transition: all .3s;    /* Safari 和 Chrome */
				-o-transition: all .3s; /* Opera */
				&:before {
						position: absolute;
						content: '';
						width: 0;
						height: 2px;
						background: $typeColor;
						left: 0;
						bottom: 18px;
						transition: all .3s;
						-moz-transition: all .3s;   /* Firefox 4 */
						-webkit-transition: all .3s;    /* Safari 和 Chrome */
						-o-transition: all .3s; /* Opera */
					}
				&:hover {
					cursor: pointer;
					color: $typeColor;
					&:before {
						position: absolute;
						content: '';
						width: 100%;
						height: 2px;
						background: $typeColor;
						left: 0;
						bottom: 18px;
					}
					
				}
				&:last-child {
					margin-right: 0;
				}
			}
			.newColor {
				color: $typeColor;
				position: relative;
				&:before {
					position: absolute;
					content: '';
					width: 100%;
					height: 2px;
					background: $typeColor;
					left: 0;
					bottom: 18px;
				}
			}
		}
	}
</style>